<template>
  <div class="data-quality bg-white rounded-lg shadow p-4">
    <h2 class="text-lg font-bold mb-2">数据质量</h2>
    
    <div class="space-y-3">
      <div v-for="(source, index) in dataSources" :key="index">
        <div class="flex justify-between items-center mb-1">
          <span class="text-sm font-medium">{{ source.name }}</span>
          <span class="text-xs font-medium" :class="getQualityColor(source.quality)">
            {{ getQualityText(source.quality) }}
          </span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-1.5">
          <div class="h-1.5 rounded-full" 
               :class="getQualityBarColor(source.quality)"
               :style="{ width: `${source.quality}%` }"></div>
        </div>
        <p class="text-xs text-gray-500 mt-1">更新于: {{ source.lastUpdate }}</p>
      </div>
    </div>
    
    <div class="mt-4 pt-3 border-t border-gray-200">
      <h3 class="text-sm font-medium mb-2">数据覆盖率</h3>
      <div class="flex items-center">
        <span class="text-2xl font-bold text-blue-600">{{ overallCoverage }}%</span>
        <div class="ml-auto text-xs">
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
            高可靠性
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const dataSources = ref([
  { name: '实时行情', quality: 98, lastUpdate: '1分钟前' },
  { name: '财务数据', quality: 85, lastUpdate: '今天 09:30' },
  { name: '新闻情绪', quality: 92, lastUpdate: '5分钟前' },
  { name: '社交媒体', quality: 76, lastUpdate: '10分钟前' },
]);

const overallCoverage = computed(() => {
  const sum = dataSources.value.reduce((acc, source) => acc + source.quality, 0);
  return Math.round(sum / dataSources.value.length);
});

const getQualityColor = (quality) => {
  if (quality >= 90) return 'text-green-600';
  if (quality >= 75) return 'text-blue-600';
  if (quality >= 60) return 'text-yellow-600';
  return 'text-red-600';
};

const getQualityBarColor = (quality) => {
  if (quality >= 90) return 'bg-green-600';
  if (quality >= 75) return 'bg-blue-600';
  if (quality >= 60) return 'bg-yellow-600';
  return 'bg-red-600';
};

const getQualityText = (quality) => {
  if (quality >= 90) return '优秀';
  if (quality >= 75) return '良好';
  if (quality >= 60) return '一般';
  return '较差';
};
</script>